<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p:dialog xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:p="http://primefaces.org/ui"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:fn="http://java.sun.com/jsp/jstl/functions"
          widgetVar="historyDialog" header="History" modal="true" width="800" resizable="false">
    <h:form id="historyForm"
            prependId="false">
        <p:messages/>
        <h:inputHidden id="isPeriodSelected" value="#{taskModel.isPeriodSelected}"/>
        <h:panelGroup layout="block">
            <h:panelGrid id="newTaskGrid" columns="1">
					<p:accordionPanel>
						<p:tab title="#{resourceBundle['task.accordion.generalTitle']}">
                <h:panelGroup layout="block" styleClass="detailContent">
                    <h:panelGroup layout="block">
									<h:panelGrid columns="3" width="100%" columnClasses="firstColumn, secondColumn">

                            <p:outputLabel value="#{resourceBundle['task.name']}" for="name"/>
                            <p:inputText id="name" value="#{taskModel.name}" label="Name" required="true">
                                <f:validateLength minimum="2" maximum="150"/>
                            </p:inputText>
                            <p:message for="name" display="icon"/>

                            <p:outputLabel value="#{resourceBundle['task.description']}" for="description"/>
                            <p:inputTextarea id="description" value="#{taskModel.description}" required="true">
                                <f:validateLength minimum="2" maximum="500"/>
                            </p:inputTextarea>
                            <p:message for="description" display="icon"/>

                            <p:outputLabel value="#{resourceBundle['task.assignatedUser']}" for="userAsignee"/>
                            <p:selectOneMenu id="userAsignee" value="#{taskModel.userAssignee}" required="true">
                                <f:selectItem itemLabel="Select User to Assign" noSelectionOption="true"/>
                                <f:selectItems value="#{taskModel.userList}" var="user"
                                               itemLabel="#{user.firstName} #{user.lastName}"/>
                            </p:selectOneMenu>
                            <p:message for="userAsignee" display="icon"/>

                            <p:outputLabel value="#{resourceBundle['task.priority']}" for="priority"/>
                            <p:selectOneMenu id="priority" value="#{taskModel.priority}" required="true"
                                             widgetVar="prorityWii">
                                <f:selectItem itemLabel="Select Priority" noSelectionOption="true"/>
                                <f:selectItems value="#{taskModel.priorityList}" var="priority"
                                               itemLabel="#{priority.name}"/>
                            </p:selectOneMenu>
                            <p:message for="priority" display="icon"/>



									</h:panelGrid>
								</h:panelGroup>

							</h:panelGroup>
						</p:tab>
						<p:tab title="#{resourceBundle['task.accordion.periodicityTitle']}">
							<h:panelGroup layout="block" styleClass="detailContent" >
								<h:panelGroup layout="block">
										<h:panelGrid columns="3" width="60%" columnClasses="firstColumn,secondColumn">
				                            <h:outputText value="#{resourceBundle['task.recurrentTask']}"/>
											<span class="toggle-bg">
												<input type="radio" name="toggle" value="off"/>
												<input type="radio" name="toggle" value="on"/>
												<span class="switch"></span>
											</span>
								            <h:outputText/>
	
											<h:outputLabel value="#{resourceBundle['task.dueDate']}" for="popupButtonCal" id="popupButtonCalLabel" styleClass="popupCalendar"/>
					            			<p:calendar value="#{taskModel.dueTime}" id="popupButtonCal" showOn="button" mindate="today" styleClass="popupCalendar" readonlyInput="true"/>
								            <p:message for="popupButtonCal" display="icon"/>
						                 </h:panelGrid>
										<h:outputLabel value="#{resourceBundle['task.customScheduleDaysBefore']}" for="customScheduleDaysBefore" styleClass="recurrent"/>
							            <p:spinner id="customScheduleDaysBefore" min="0" max="31" value="#{taskModel.customScheduleDaysBefore}" />
							            <p:message for="customScheduleDaysBefore" display="icon"/>
	
							            <span></span>
							            <h:outputLabel value="#{resourceBundle['task.customScheduleDaysAfterMax']}" for="customScheduleDaysAfterMax" styleClass="recurrent"/>
							            <p:spinner id="customScheduleDaysAfterMax" min="0" max="31" value="#{taskModel.customScheduleDaysAfterMax}"/>
							            <p:message for="customScheduleDaysAfterMax" display="icon"/>
					             </h:panelGroup>
							</h:panelGroup>

                <p:outputPanel id="recurrentTaskPanel" styleClass="recurrentPanel" style="display:none;">

							    <p:selectOneRadio id="customRadio"  layout="custom" value="#{taskModel.selectionModel.selectionPeriodicity}">
							        <f:selectItem itemValue="#{resourceBundle['task.periodicity.daily']}"/>
							        <f:selectItem itemValue="#{resourceBundle['task.periodicity.weekly']}"/>
							        <f:selectItem itemValue="#{resourceBundle['task.periodicity.monthly']}"/>
							        <f:selectItem itemValue="#{resourceBundle['task.periodicity.yearly']}"/>
                    </p:selectOneRadio>

                    <h:panelGrid columns="4" columnClasses="firstColumn,secondColumn,thirdColumn">
                        <p:radioButton id="opt1" for="customRadio" itemIndex="0"/>
                        <h:outputLabel for="opt1" value="Daily"/>
                        <p:calendar value="#{taskModel.selectionModel.dailyPeriodicity}" id="dailyPeriodicity"
                                    showOn="button" mindate="tomorrow" readonlyInput="true"/>
                        <p:message for="dailyPeriodicity" display="icon"/>

                        <p:radioButton id="opt2" for="customRadio" itemIndex="1"/>
                        <h:outputLabel for="opt2" value="Weekly"/>
                        <p:selectOneButton id="weeklyValue" value="#{taskModel.selectionModel.weeklyPeriodicity}">
                            <f:selectItems itemLabel="#{day.dayName}" itemValue="#{day.order}"
                                           value="#{taskModel.weekDays}"
                                           var="day"/>
                        </p:selectOneButton>
                        <p:message for="weeklyValue" display="icon"/>

                        <p:radioButton id="opt3" for="customRadio" itemIndex="2"/>
                        <h:outputLabel for="opt3" value="Monthly"/>
                        <p:spinner min="1" max="31" id="monthlyValue"
                                   value="#{taskModel.selectionModel.monthlyPeriodicity}"/>
                        <p:message for="monthlyValue" display="icon"/>

                        <p:radioButton id="opt4" for="customRadio" itemIndex="3"/>
                        <h:outputLabel for="opt4" value="Yearly"/>
                        <h:panelGroup>
							  			<p:spinner min="1" max="12" id="yearlyMonthValue" value="#{taskModel.selectionModel.yearlyMonthValue}" >
							  				<p:ajax event="change" listener="#{taskController.updateYearlyDayValues}" update="yearlyDayValue"/>
							  			</p:spinner>
                            <p:spinner min="1" max="#{taskModel.selectionModel.maxYearlyDayValue}"
                                       id="yearlyDayValue" value="#{taskModel.selectionModel.yearlyDayValue}"/>
                            <p:message for="yearlyDayValue" display="icon"/>
                        </h:panelGroup>                       
                    </h:panelGrid>
                </p:outputPanel>
						</p:tab>
						<p:tab title="#{resourceBundle['task.accordion.commentsTitle']}">
							<h:panelGroup layout="block" styleClass="detailContent" >
								<h:panelGrid columns="3" width="100%" columnClasses="firstColumn, secondColumn">
									<p:outputLabel value="#{resourceBundle['task.accordion.commentsTitle']}:" for="comments"/>
		                            <p:inputTextarea id="comments" value="#{taskModel.newComment}" required="true" styleClass="taskComments">
		                                <f:validateLength minimum="2" maximum="500"/>
		                            </p:inputTextarea>
		                            <p:message for="comments" display="icon"/>
	                            </h:panelGrid>							
							</h:panelGroup>
							<br/>
							<div class="commentsBox" > 
								<c:forEach var="item" items="#{taskModel.commentList}" >								
									<h:panelGroup layout="block" >
										<span class="commentContainer">
										<span class="commentAutor"><h:outputText value="#{item.user.firstName} #{item.user.lastName} said on #{item.formattedDate}: "/><h:graphicImage value="/resources/images/comment.png" /></span><br/>
										<span class="commentContent"><h:outputText value="#{item.description}"/></span>
										</span>
									</h:panelGroup>
	                        	</c:forEach>
                        	</div>
                        	<ui:fragment rendered="#{fn:length(taskModel.commentList) == 0 }" >
                        		<h:outputText value="No comments yet." />
                        	</ui:fragment>							
						</p:tab>
					</p:accordionPanel>
                <h:panelGroup layout="block" styleClass="detailActions">
                    <p:commandButton value="Cancel" inmediate="true" styleClass="btn" onclick="taskDialog.hide()" update="@none" process="@none"/>
                    <p:commandButton value="Save" update=":mainForm#{taskModel.dataTableToUpdate}"
                                     action="confirmTask" styleClass="btn savebtn"
                                     oncomplete="handleServerResponse(xhr, status, args)"/>
                </h:panelGroup>

            </h:panelGrid>
        </h:panelGroup>
    </h:form>
    <script type="text/javascript">
        function handleServerResponse(xhr, status, args) {
            if (!args.validationFailed) {
                taskDialog.hide();
            }
        }
    </script>
</p:dialog>